<template>
  <div class="orderResult">
    <div class="container">
      <svg-icon style="width: 250px; height: 250px;" name="order-result-success" />
      <article>
        <h1>恭喜您，支付成功</h1>
        <p>请耐心等待发货，保持手机畅通</p>
      </article>
      <div class="btns">
        <el-button class="common order" @click="linkTo('/myOrder')">查看订单</el-button>
        <el-button class="common index" @click="linkTo('/index')">继续购物</el-button>
      </div>
      <div v-show="visible.polite" class="discount">
        <svg-icon
          style="width: 120px;height: 120px;"
          name="order-result-pa"
        />
        <div class="content">
          <p v-if="credit">恭喜获得额外积分 <span>{{ credit }}</span></p>
          <p v-if="growth">
            恭喜获得额外会员成长值 <span>{{ growth }}</span>
          </p>
          <p
            v-for="(item, index) in couponList"
            :key="index"
          >
            恭喜获得
            <span>{{ item.discount }}</span>
            <span v-if="item.couponType ===1">元</span>
            <span v-if="item.couponType ===2">折</span>优惠券1张</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onBeforeMount, defineComponent, reactive, ref, shallowRef } from 'vue';
import { useRouter } from 'vue-router';
import SvgIcon from '@/components/svgIcon/index.vue';
import {
  getPoliteList
} from '@/api/Activity/ActivityPolite.js'


defineComponent({
  name: 'OrderResult'
})
const router = useRouter();

let visible = reactive({
  polite: false
})

let growth = shallowRef(0);
let credit = shallowRef(0);
let couponList = ref([]);
function getPolite () {
  getPoliteList({
    orderId: router.currentRoute.value.query.orderId
  }).then(response => {
    const res = response.data
    if (res.code === '200') {
      growth.value = res.data.growth
      credit.value = res.data.credit
      couponList.value = res.data.couponList
      if (growth.value || credit.value || (couponList.value && couponList.value.length > 0)) {
        visible.polite = true
      }
    }
  }).catch(err => {
    ElMessage.error(err.message)
  })
}
function linkTo (path) {
  if (!path) {
    return
  }
  router.push({
    path: path
  })
}
onBeforeMount(() => {
  getPolite()
})
</script>

<style lang="scss" scoped>
.orderResult{
  max-width: 1250px;
  height: 800px;
  margin: auto;
  .container{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    article{
      margin: 30px 0;
      text-align: center;
      font-family: Microsoft YaHei;
      h1{
        font-size: 18px;
        color: #333333;
      }
      p{
        margin-top: 10px;
        font-size: 14px;
        color: #999999;
      }
    }
    .btns{
      width: 420px;
      margin-bottom: 30px;
      display: flex;
      justify-content: space-between;
      .common{
        width: 200px;
        height: 50px;
        padding: 0;
        border-radius: 0;
      }
      .order{
        color: #999;
        border: 1px solid #999;
      }
      .index{
        color: #FFEBC4;
        background: #333333;
      }
    }
    .discount{
      width: 385px;
      min-height: 120px;
      padding: 0 25px;
      background: #FFF9F6;
      border: 1px solid #FBE9E6;
      display: flex;
      .content{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
      span{
        color: #C83732;
      }
    }
  }
}
</style>
